<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="star">
					<view class="star-item">
						<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
					</view>
					<view class="star-item">
						<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
					</view>
					<view class="star-item">
						<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
					</view>
					<view class="star-item">
						<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
					</view>
					<view class="star-item">
						<image class="star-image-select" src="http://ai.ylcaifu.com/appimg/images/2.0-%E4%BA%A7%E5%93%81/2.2-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/xingxingxuanzhon.png" />
					</view>

				</view>
				<view class="nengli">风险承受能力：<label class="uni-font15">稳健性投资人</label></view>

			</view>
			<view class="sec">
				<view class="left">
					<view class="left-top">86</view>
					<view class="left-bot">最近订水时间</view>
				</view>
				<view class="right">
					<view class="right-top">4</view>
					<view class="right-bot">最喜欢品牌</view>
				</view>
			</view>
			<view class="third">
				<view class="canvasView">
					<view class="canvas-bar">
						<view class="tuijian">推荐配置</view>
					</view>
					<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
				</view>
				<view class="canvasView">
					<view class="canvas-bar">
						<view class="tuijian">推荐资产组合</view>
					</view>

					<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
				</view>

			</view>
			<view class="tishi">如果您想得到准确的测评结果，可以联系理财师，让我们更加了解您，给出更详细的投资报告</view>
			<view class="questionBox">
				<view class="question">
					重新测评
				</view>
				<view class="question">
					联系理财师
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '../../../components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '../../../components/mpvue-echarts/src/echarts.vue';
	const cityList = [{
		value: 25,
		name: '浮动收益 25%'
	}, {
		value: 10,
		name: '保险保障 10%'
	}, {
		value: 15,
		name: '流动性资产 15%'
	}, {
		value: 10,
		name: '风险对冲资产 10%'
	}, {
		value: 20,
		name: '固定收益 20%'
	}];

	let pieOption = {
		animation: false,
		backgroundColor: '#F8F8F8',
		color: ['rgb(248,163,1)', '#fd5c11', '#488aff', '#1bd38b', '#8350f5', '#FF9F7F'],
		series: [{
			label: {
				normal: {
					fontSize: 14
				}
			},
			type: 'pie',
			center: ['50%', '50%'],
			radius: ['40%', '70%'],
			data: [],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 2, 2, 0.3)'
				}
			}
		}]
	};

	let lineOption = {
		animation: false,
		color: ['#37A2DA', '#9FE6B8'],
		grid: {
			x: 35,
			x2: 10,
			y: 30,
			y2: 25
		},
		calculable: false,
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		}],
		yAxis: [{
			type: 'value',
			splitArea: {
				show: true
			}
		}],
		series: [{
			name: '蒸发量',
			type: 'line',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		}, {
			name: '降水量',
			type: 'line',
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		}]
	};
	export default {
		data() {
			return {
				echarts: echarts,
				updateStatus: false
			}
		},
		onLoad() {
			pieOption.series[0].data = cityList.slice(0);
			console.log(pieOption)
			console.log("nihao")
		},
		methods: {
			toLcsKehubiaoqian() {
				uni.navigateTo({
					url: './lcs-kehubiaoqian/lcs-kehubiaoqian',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goBrowser() {
				// #ifdef APP-PLUS
				plus.runtime.openURL('https://github.com/F-loat/mpvue-echarts');
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					content: '请复制链接在浏览器里打开',
					showCancel: false
				})
				// #endif
			},
			updatePie() {
				// 参考 mpvue-charts 的懒加载示例
				// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue

				if (this.updateStatus) {
					return;
				}
				pieOption.series[0].data.push({
					value: 20,
					name: '武汉'
				});
				pieOption.series[0].data.push({
					value: 10,
					name: '杭州'
				});
				this.$refs.pieChart.init();
				this.updateStatus = true;
			},
			pieInit(canvas, width, height) {
				let pieChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(pieChart)

				pieChart.setOption(pieOption)
				return pieChart
			},
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)

				lineChart.setOption(lineOption)
				return lineChart
			}
		},
		components: {
			mpvueEcharts
		}
	}
</script>

<style>
	page {
		background: rgba(28, 28, 28);
	}

	.content {
		padding: 0 30upx
	}

	.top {
		height: 74px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.star {
		display: flex;
		flex-direction: row;
	}

	.star-image-select {
		width: 15px;
		height: 14px;
		margin-right: 10upx;
	}

	.nengli {
		margin-top: 13px;
		color: rgba(255, 255, 255, 1);
	}

	.uni-font15 {
		font-size: 15px;
	}

	.sec {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 80px;
		color: rgb(255, 255, 255);
		text-align: center;
	}

	.left-top,
	.right-top {
		font-size: 27px
	}

	.canvasView {
		width: 100%;
		flex: 1;
		flex-direction: column;
	}

	.canvasView canvas {
		height: 400upx;
	}

	.navigate {
		color: #007AFF;
	}

	.canvas-bar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-weight: bold;
		align-items: center;
		font-size: 16px;
	}

	.third {
		background: rgb(255, 255, 255);
		padding: 30upx;
		border-radius: 10px;
	}

	.tishi {
		font-size: 12px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-top: 15px;
	}

	.questionBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 40upx 0;
		text-align: center;


	}

	.question {
		margin: 0 20upx;
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);

	}
</style>
